// 首页js文件

// 轮播图js
// 轮播图区域
var banner = document.querySelector('.main_banner');
// 轮播图
var banner_imgs = document.querySelectorAll('.main_banner .banner_img li');
// 圆点
var banner_dots = document.querySelectorAll('.main_banner .banner_dot li a');
// 左右
var left = document.querySelector('.main_banner .banner_arrow_l');
var right = document.querySelector('.main_banner .banner_arrow_r');

// 从0开始
var index = 0;

// 初始化时设置图片及圆点样式
imgOn(index);
dotOn(index);

// 右击
right.onclick = function(){     
    index++;// +1
    if(index > banner_imgs.length-1){
        index = 0;// 越界则返回0
    }
    // 设置图片层级
    imgOn(index);
    // 圆点样式跟随
    dotOn(index);
    return false;// 阻止a链接跳转
}
// 左击
left.onclick = function(){
    index--;
    if(index < 0){
        index = banner_imgs.length-1;//越界则返回最后
    }
    // 设置图片层级
    imgOn(index);
    // 圆点样式
    dotOn(index);
    return false;// 阻止a链接跳转
}

// 设置定时器
var timer = setInterval(function(){
    right.onclick();
}, 3000);
// 鼠标移入清除定时器
banner.onmouseover = function(){
    clearInterval(timer);
}
// 鼠标移开重新开始定时器
banner.onmouseout = function(){
    timer = setInterval(function(){
        right.onclick();
    }, 3000);
}

// 圆点提示
for(var d = 0; d < banner_dots.length; d++){
    // 依次给圆点设置a属性为索引值
    banner_dots[d].a = d;
    // 点击切换
    banner_dots[d].onclick = function(){
        index = this.a;// 点击时修改index
        
        // 设置图片层级
        imgOn(index);
        // 点击时圆点改变
        dotOn(index);
        return false;
    }
    // 鼠标移入
    banner_dots[d].onmouseover = function(){
        dotOn(this.a);// 移入时改变当前圆点
    }
    // 鼠标移除
    banner_dots[d].onmouseout = function(){
        dotOn(index);// 移除时恢复index圆点
    }
}

/**
 *  设置图片层级
 */
function imgOn(index){
    // 设置所有层级为0
    for(var j=0;j<banner_imgs.length;j++){
        banner_imgs[j].style.zIndex = 0;
        banner_imgs[j].style.opacity = 0;
    }
    // 淡入淡出过渡动画  css中设置transition
    banner_imgs[index].style.opacity = 1;
    // 设置当前层级为1
    banner_imgs[index].style.zIndex = 1;
}
/**
 *  设置圆点样式跟随
 */
function dotOn(index){
    // 清掉圆点样式
    for(var e = 0; e < banner_dots.length; e++){
        banner_dots[e].style.width = "20px";
        banner_dots[e].style.borderRadius = "10px";
        banner_dots[e].style.background = "rgba(255,255,255,.5)";
    }
    // 设置当前index圆点
    banner_dots[index].style.width = "30px";
    banner_dots[index].style.borderRadius = "10px;"
    banner_dots[index].style.background = "rgba(255,255,255,.8)";
}